<template>
    <mescroll-uni
        @init="mescrollInit"
        :height="height"
        :down="downOption"
        @down="refresh"
        :up="upOption"
        @up="getData"
        @emptyclick="emptyClick">
        <!-- 数据列表 -->
        <order-item :key="index" v-for="(item, index) in datas" :data="item"></order-item>
    </mescroll-uni>
</template>

<script>
import orderItem from "@/pages_shop/components/return/return-goods-item.vue"
import { GetRefundOrderList } from "@/service/api/exChange.js"
export default {
    props: {
        height: {
            type: String,
            default: "100px",
        },
        state: {
            type: String,
            default: "-1",
        },
        requestData: {
            type: Object,
            default: {},
        },
    },
    components: {
        orderItem,
    },
    data() {
        return {
            downOption: {
                use: true,
            },
            upOption: {
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10, // 每页数据的数量
                    time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                },
                textLoading: "加载中 ...", // 加载中的提示文本
                textNoMore: "-- 没有更多了 --", // 没有更多数据的提示文本
                empty: {
                    icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                    tip: "~ 暂无数据 ~", // 空提示
                },
                toTop: {
                    src: false,
                },
            },
            datas: [],
            param: {},
        }
    },
    mounted() {
        // //#ifdef H5
        // this.getData();
        // //#endif
        // this.refresh(this.requestData)
    },
    methods: {
        getData(page) {
            let param = this.requestData
            param.pageSize = page.size
            param.pageIndex = page.num
            param.state = this.state
            param.type = 1 //退单类型
            param.OptType = 0 //0是客户自己退单，1是代客退单，-1取所有数据
            GetRefundOrderList(param).then((res) => {
                this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                this.datas = this.datas.concat(res.Data)
            })
        },
        //点击空布局按钮的回调
        emptyClick() {
            uni.showToast({
                title: "点击了按钮,具体逻辑自行实现",
            })
        },
        refresh(requestData) {
            this.param = requestData
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";

.return-order-item {
    display: flex;
    flex-direction: column;
    padding: 15rpx $app-page-padding 0;
    background: $color-white;
    border-radius: $border-radius-10;
    margin: $app-page-padding;
}

.header {
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;

    .status {
    }

    .has-good {
        position: relative;
        display: flex;
        flex: 1;
        height: 50rpx;

        .title {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-left: 10rpx;
            margin-top: 10rpx;

            .icon {
                margin-right: 6rpx;
            }

            .text {
                color: $color-white;
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            width: 150rpx;
            height: 48rpx;
            /* 宽高 */
            background-color: $app-color-main;
            /* 颜色 */
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            /* 设置圆角 */
            transform: perspective(16rpx) rotateX(2deg);
            /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
            transform-origin: bottom left;
            /* bottom left = left bottom = 0 100% 中心点偏移量*/
        }
    }

    .hasNot {
        .bg {
            background-color: $color-yellow-1;
        }
    }
}

.order-info {
    background: $color-gray-5;
    padding: $app-page-padding;

    .order-number {
        margin-bottom: 35rpx;

        text {
            color: $color-black;
            font-size: $font-size-30;
        }
    }

    .order-info-other {
        display: flex;
        flex-direction: row;

        .other-item {
            display: flex;
            flex: 1;
            align-items: center;

            text {
                margin-left: 6rpx;
            }
        }
    }
}

.order-time {
    display: flex;
    flex-direction: row;
    height: 88rpx;
    align-items: center;

    .time {
        display: flex;
        flex: 1;
        align-items: center;

        text {
            margin-left: 6rpx;
        }
    }
}
</style>
